<template>
	<view class="container">
		<u-form :model="formModel" ref="uForm" labelPosition="top" label-width='160' v-show="rentConfig.nameList">
			<u-form-item :label="rentConfig.nameList.trade" prop="trade" borderBottom @click="tradeShow = true">
				<u-input v-model="formModel.trade" placeholder='请选择' disabled disabledColor='#FFFFFF' type="select" border="none" />
				<u-picker :show="tradeShow" :columns="tradeColumns" keyName='label' @cancel='tradeShow = false' @confirm='tradeConfirm'></u-picker>
			</u-form-item>
			<u-form-item :label="rentConfig.nameList.money" prop="money" borderBottom rightIcon='arrow-right'>
				<u-input v-model="formModel.money" placeholder='请输入'maxlength='30' border="none" />
			</u-form-item>
			<u-form-item :label="rentConfig.nameList.addr" prop="addr" borderBottom @click="addrShow = true">
				<u-input v-model="formModel.addr" placeholder='请选择' disabled disabledColor='#FFFFFF' type="select" border="none" />
				<u-picker :show="addrShow" :columns="addrColumns" keyName='label' @cancel='addrShow = false' @confirm='addrConfirm'></u-picker>
			</u-form-item>
			<!-- <u-form-item label="详细地址" prop="detailAddr" borderBottom rightIcon='arrow-right' labelPosition='top'>
				<view style="margin-top: 14rpx;">
					<u--textarea fixed='true' v-model="formModel.detailAddr" type='textarea' border='surround' maxlength='500' height='100rpx' placeholder='例如:xxx街道 xxx小区 xx号楼 xx单元' />
				</view>
			</u-form-item> -->
			<u-form-item :label="rentConfig.nameList.contacts" prop="contacts" borderBottom rightIcon='arrow-right'>
				<u-input v-model="formModel.contactName" placeholder='请输入'maxlength='30' border="none" />
			</u-form-item>
			<u-form-item :label="rentConfig.nameList.contactPhone" prop="contactPhone" borderBottom rightIcon='arrow-right'>
				<u--input v-model="formModel.contactPhone" placeholder='请输入' maxlength='11' border="none"/>
			</u-form-item>
			<view class="tags" style="background-color: #FFF;width: 650rpx;margin-top: 30rpx;border-radius: 10rpx;display: flex;flex-direction: row;justify-content: flex-start;flex-wrap: wrap;">
				<text class="default" style="font-size: 30rpx;padding: 0;">{{rentConfig.nameList.tags}}：</text>
				<text @click="tagAction(tag, index)" class="default" :class="tag.select ? 'spec_sel' : 'spec'"
					v-for="(tag, index) in tags" :key='index'>{{tag.name}}</text>
			</view>
		</u-form>
		<view class="footer safeArea" v-if="rentConfig.nameList">
			<jc-button :width="600" title='提 交' @click='submit' backgroundColor="#DD4949"></jc-button>
		</view>
	</view>
</template>

<script>
	import { trade } from '@/api/trade.js'
	import { formRecord } from '@/api/formRecord.js'
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import {uploadFileToService} from '@/common/utils/uploadFile.js'
	import {
		config
	} from "@/api/config.js";
	export default{
		components: {},
		data() {
			return {
				formModel: {coverUrl: '',name: '', contactName: '', contactPhone: '', addr: '', trade: ''},
				fromRules: {
					'contactName' : [{type: 'string',required: true,message: '请输入',trigger: ['blur', 'change']},],
					'contactPhone' : [{type: 'string',required: true,message: '请输入',trigger: ['blur', 'change']},],
					'addr' : [{type: 'string',required: true,message: '请输入',trigger: ['blur', 'change']},],
					'trade': [{type: 'string',required: true,message: '请输入',trigger: ['blur', 'change']},],
					'detailAddr': [{type: 'string',required: true,message: '请输入',trigger: ['blur', 'change']},],
				},
				tradeShow: false,
				tradeColumns:[[{value: 1, label: '单间'},{value: 2, label: '两室'},{value: 3, label: '三室'},{value: 4, label: '四室'},{value: 5, label: '独院'}]],
				addrShow: false,
				addrColumns:[[{value: 1, label: '滑县新区'},{value: 2, label: '滑县城关'},{value: 3, label: '滑县老城区'},{value: 4, label: '滑县高铁片区'}]],
				currentAddr: {},
				selectAddr: {},
				lesseeId: '',
				tags: [{
					id: 1,
					select: false,
					name: '繁华地段'
				}, {
					id: 2,
					select: false,
					name: '公寓'
				}, {
					id: 3,
					select: false,
					name: '近地铁'
				},{
					id: 3,
					select: false,
					name: '近学校'
				},{
					id: 3,
					select: false,
					name: '有电梯'
				}],
				rentConfig: {}
			}
		},
		onLoad() {
			this.getConfigByKey()
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			// var fromRules = {
			// 	'coverUrl' : [{type: 'string',required: true,message: '请上传门头LOGO',trigger: ['blur', 'change']},],
			// 	'name' : [{type: 'string',required: true,message: '请输入名称',trigger: ['blur', 'change']},]
			// 	},
			this.$refs.uForm.setRules(this.fromRules)
		},
		methods:{
			getConfigByKey() {
				config.getConfigByKey({
					key: 'rent'
				}).then(res => {
					if(res.data.code == 10000){
						this.rentConfig = res.data.data.contentDict
						uni.setNavigationBarTitle({
							title: this.rentConfig.title
						})
					}
				})
			},
			tagAction(tag, index) {
				tag.select = !tag.select
			},
			chooseLocation(){
				var latitude = 0
				var longitude = 0
				if(this.lesseeId){
					latitude = this.formModel.latitude
					longitude = this.formModel.longitude
				}else{
					latitude = this.currentAddr.location.lat
					longitude = this.currentAddr.location.lng
				}
				uni.chooseLocation({
					type: "gcj02", // 必须是gcj02
					latitude: latitude,
					longitude: longitude,
					success: (res)=>{
						this.formModel.location = JSON.stringify(res.latitude) + '，' + JSON.stringify(res.longitude)
						this.formModel.latitude = res.latitude
						this.formModel.longitude = res.longitude
						this.formModel.addr = res.address + res.name
						// this.selectAddr = res
					},
					fail(error) {
						console.log('error', error)
						// 处理获取位置信息失败的情况
						
					}
				});
			},
			upload(){
				uploadFileToService().then(res=>{
					if(res.code==10000){
						this.formModel.coverUrl = res.data.url
					}
				})
			},
			addrConfirm(val){
				this.addrShow = false
				this.formModel.addr = val.value[0].label
			},
			tradeConfirm(val){
				this.tradeShow = false
				this.formModel.trade = val.value[0].label
			},
			getTradeList() {
				var params = {
				}
				trade.getTradeList(params).then(res => {
					if (res.data.code == 10000) {
						var _list = res.data.data.list
						this.tradeColumns.push(_list)
					}
				})
			},
			submit() {
				// if(!this.formModel.coverUrl){
				// 	uni.showToast({
				// 		title: '请上传门头LOGO',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				
				this.$refs.uForm.validate().then(res => {
					var tagLabels = ''
					this.tags.map(item=>{
						if(item.select){
							tagLabels = tagLabels + item.name + ','
						}
					})
					tagLabels = tagLabels.slice(0, -1)
					var list = [{
						label: '户型',
						value: this.formModel.trade
					},{
						label: '预算年租金（元）',
						value: this.formModel.money
					},{
						label: '地址',
						value: this.formModel.addr
					},{
						label: '联系人称呼',
						value: this.formModel.contactName
					},{
						label: '联系人手机号',
						value: this.formModel.contactPhone
					},{
						label: '偏好',
						value: tagLabels
					},]
					
					formRecord.submitForm({
						formKey: 'rent',
						content: list
					}).then(res => {
						if(res.data.code == 10000){
							uni.navigateBack()
							uni.showToast({
								title: '提交成功',
								icon: 'none'
							})
						}
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		display: flex;
		flex-direction: column;
		padding: 0 40rpx;
		background-color: #FFFFFF;
		height: 100vh;
	}
	.footer{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;
	}
	.tags {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	
		.default {
			margin-bottom: 18rpx;
			padding: 0 35rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
			font-size: 26rpx;
		}
	
		.spec {
			background-color: #EEEEEE;
			border: #EEEEEE 1px solid;
		}
	
		.spec_sel {
			background-color: #fefefe;
			border: #007aff 1px solid;
			color: #007aff !important;
		}
	}
</style>